<template>
     <div class="login-container">
         <el-card class="login-card">
            <template #header>
            <div class="card-header">
                <h2>欢迎登录</h2>
            </div>
            </template>
            <!-- <el-form 
                ref="loginFormRef"  
                :form="loginForm" 
                :rules="rules" 
                hide-required-asterisk 
             > -->
               <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="loginForm"
                :rules="rules"
               hide-required-asterisk

            >
                <el-form-item label="用户名" label-width="60px" prop="username">
                    <el-input placeholder="请输入用户名" v-model="loginForm.username" :prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item label="密码"  label-width="60px" prop="password">
                    <el-input placeholder="请输入用户名" type="password" v-model="loginForm.password" :prefix-icon="Lock"></el-input>
                </el-form-item>
                 <el-form-item >
                    <el-button type="primary" style="width: 100%;" @click="handleLogin(ruleFormRef)">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>

     </div>
</template>

<script setup>
import { ref ,reactive} from 'vue'
import { User,Lock } from '@element-plus/icons-vue'
import {useRouter}  from 'vue-router'
import {login} from '../api/user'
const router  = useRouter()
const  loginForm  = reactive({
    username:'',
    password:''
})
// 表单对象
const  ruleFormRef = ref(null)
// 表单验证规则
const rules = reactive({
     username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    
})
//登录的方法
const handleLogin =  async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('基础验证通过!')
      login(loginForm).then(res=>{
        console.log('登录====>：',res)
    })
      //调用后端接口 判断用户名和密码是否正确 登录成功  
      router.push('/home/btn')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script >
<style  scoped>
.login-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* background-color: #fef5f5; */
    background-image:url('/src/assets/imgs/login-bg.jpg');
}
.login-container .login-card{
    width: 420px;
}
.login-container .login-card .el-input{
    width: 96%;
}
.login-card .card-header{
    text-align: center;
}
</style>